/*
 * @Description: 用户弹窗表单通用组件
 * @Author: Rfan
 * @Date: 2022-09-03 16:25:21
 * @LastEditTime: 2022-09-05 18:26:18
 */

import { useEffect, useState } from 'react';
import { Col, Form, Input, Radio, Row, Select, Space } from 'antd';
import { fetchRoleList } from '@/api/role';
import { useOrgAndUserContext } from '../../../contexts/OrgAndUserContext';
import type { IDictionary } from '@/interfaces/global';

const { Option } = Select;

interface IUserFormItemsProps {
  visible: boolean;
  onRoleChange: any;
}

function UserFormItems(props: IUserFormItemsProps) {
  const { visible, onRoleChange } = props;
  const { selectDepartment, securityList, userTypeList } = useOrgAndUserContext();

  // 角色列表
  const [roleList, setRoleList] = useState([]);

  useEffect(() => {
    if (visible) {
      fetchRoleList({}).then((res) => {
        const { data } = res;
        setRoleList(data);
      });
    }
  }, [visible]);

  return (
    <>
      <Row gutter={24}>
        <Col span={12}>
          <Form.Item label="所属部门">{selectDepartment.deptName}</Form.Item>
        </Col>
        <Col span={12}> </Col>
        <Col span={12}>
          <Form.Item name="realname" label="姓名" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="username" label="用户代码" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="headUrl" label="头像">
            <Input disabled />
          </Form.Item>
        </Col>
        <Col span={12}></Col>
        <Col span={12}>
          <Form.Item name="password" label="用户密码" rules={[{ required: true }]}>
            <Input type="password" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="repassword" label="确认密码" rules={[{ required: true }]}>
            <Input type="password" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="roleList" label="所属角色">
            <Select mode="multiple" allowClear style={{ width: '100%' }} onChange={onRoleChange}>
              {roleList.map((item: any) => (
                <Option key={item.id} value={item.id}>
                  {item.roleName}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="securityClass" label="默认密级">
            <Select>
              {securityList.map((item: IDictionary) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="age" label="年龄">
            <Input type="number" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="gender" label="性别">
            <Radio.Group>
              <Space>
                <Radio value={1}>男</Radio>
                <Radio value={2}>女</Radio>
              </Space>
            </Radio.Group>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="userType" label="职务头衔">
            <Select>
              {userTypeList
                .filter((user: IDictionary) => user.id > 0)
                .map((item: IDictionary) => (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="isValid" label="账号状态">
            <Radio.Group>
              <Space>
                <Radio value={0}>正常（可登录）</Radio>
                <Radio value={1}>无效（不能登录）</Radio>
              </Space>
            </Radio.Group>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="email" label="EMail">
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="officeTel" label="办公电话">
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="faxNo" label="传真">
            <Input disabled />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="homeTel" label="家庭电话">
            <Input disabled />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="officeAddress" label="办公地址">
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="homeAddress" label="家庭地址">
            <Input disabled />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="mobile" label="移动电话">
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="磁卡号码">
            <Input disabled />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="qq" label="QQ">
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="wechat" label="微信">
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="isTempUser" label="用户类型">
            <Radio.Group>
              <Space>
                <Radio value={0}>正式用户</Radio>
                <Radio value={1}>临时用户</Radio>
              </Space>
            </Radio.Group>
          </Form.Item>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <Form.Item name="startDate" label="起始时间">
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="endDate" label="终止时间">
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="ip" label="IP地址">
            <Input />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="macAddress" label="MAC地址">
            <Input />
          </Form.Item>
        </Col>
      </Row>
      <Row>
        <Col span={12}></Col>
        <Col span={12}>
          <Form.Item name="remark" label="备注">
            <Input.TextArea />
          </Form.Item>
        </Col>
      </Row>
    </>
  );
}

export default UserFormItems;
